<template>
  <div class="containner" >
    <div class="chat-title">夕阳红聊天室</div>
    <div class="login">
      <div  class="inputbox">
        <h2>登录</h2>
        <div class="text">
          <input type="text" v-model="user1.name" placeholder="请输入用户名">
        </div>
        <div class="text">
          <input type="password" v-model="user1.password" placeholder="请输入密码">
        </div>
      </div>
      <div class="loginbutton">
        <el-button type="primary"  @click="login" style="width: 50px">登录</el-button>
        <el-button type="primary"  @click="register" style="width: 50px">注册</el-button>
      </div>
    </div>
  </div>

</template>
<script lang="ts">


import { defineComponent } from "vue";
import {user} from "../api/user"
import router from "../router";
import {mapMutations} from "vuex";

export  default  defineComponent({
  name: "Login",
  data(){
    return{
      user1:new user(),
    }
  },

  methods:{
    ...mapMutations(['setUsername']),
    login(){
      // console.log(user1);
      this.user1.login().then(res=>{
        if(res===true)
        { router.push('layout');
          this.setUsername(this.user1.getName())
        }
        else
          alert('密码错误或用户名错误')

      })
    },

    register()
    {
      this.user1.register().then(res=>{
        if(res===true)
        {alert('注册成功')
          this.setUsername(this.user1.getName())
        }
        else
          alert('注册失败')
      })
    }
  }
})


</script>



<style scoped>

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.chat-title {
  font-size: 30px;
  font-weight: bold;
}
.containner{
  width:100vw ;
  height: 100vh;
  background-image: linear-gradient(to bottom, #86DBFF 0%, #e0c3fc 100%);
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  &:last-child {
    flex: 1;
  }
}

.login{
  height: 230px;
  width: 350px;
  background-color: lightskyblue;
  border-radius: 15px;
  text-align: center;
  align-items: center;
  position: relative;
  box-shadow: 1px 2px 0 0  #6676FF;
}
.inputbox{

  padding: 25px;

}
.text{
  margin:10px auto;
  text-align: center;
}
.text input{
  border-radius: 10px;
  padding: 5px;
}

.loginbutton{
  display: flex;
  justify-content: center;
  justify-items: center;
  gap: 20px;
}

</style>
